
"use client";
import { Suspense, useEffect, useRef, useState } from "react";
import Dom from "./Dom";
import { generateWeightedRandomNumber } from "../utils/tool";
import { Button, Menu, Row, Space, Tabs } from "antd";
import { words } from "./tool";
import Study from "./study";
import { tokens } from "./dictionary";
import Read from "./read";


enum Mode {
    概览 = 'overview',
    学习 = 'study',
    识字 = 'read'
}

export default function TestE(props: { fs: FileSystem }) {
    console.log(props.fs)
    const [pageshow, setPageShow] = useState(false);
    const [state, _setState] = useState({
        unit: 11,
        mode: Mode.概览
    });
    const setState = (params: { [key: string]: any }) => {
        _setState((_state) => ({ ..._state, ...params }));
    };
    const { unit, mode } = state;
    useEffect(() => {
        setPageShow(true);
    }, [])
    return pageshow && <><main className="min-h-screen" >
        <div className="text-center m-4 ">
            {mode === Mode.概览 && <>
                <div className="m-auto">
                    <Tabs activeKey={unit + ''} onChange={(e) => {
                        setState({
                            unit: e
                        })
                    }} tabBarExtraContent={{
                        right: <Button type="link"
                            onClick={() => {
                                // const server = express();  
                                fetch('/api/discovery?unit='+unit, {
                                    method: 'GET',

                                })
                            }}
                        >测试历史</Button>
                    }}>
                        <Tabs.TabPane key={10} tab="第10课"></Tabs.TabPane>
                        <Tabs.TabPane key={11} tab="第11课"></Tabs.TabPane>
                    </Tabs>
                    <Space className="mt-4" size={[8, 16]} wrap>
                        {
                            (words as any)[`第${unit}课`].map((item: { pinyin: Array<string>, wenzi: string }, i: number) => {
                                const { wenzi, pinyin } = item;
                                const wenziarr = wenzi.split('')
                                console.log(pinyin)
                                return <Space key={i}>
                                    {
                                        wenziarr.map((ele, j) => {
                                            return <span key={j}>
                                                <div>{pinyin[j]}</div>
                                                <div>{ele}</div>
                                            </span>
                                        })
                                    }
                                    <div></div>
                                    <div></div>
                                </Space>
                            })
                        }
                    </Space>
                </div>

                <Space className="mt-4">
                    <Button onClick={() => {
                        setState({
                            mode: Mode.学习
                        })
                    }}>学习</Button>
                    <Button onClick={() => {
                        setState({
                            mode: Mode.识字
                        })
                    }}>识字</Button>
                    <Button onClick={() => {
                        // recognitionRef.current.start();
                    }}>写字</Button>
                </Space>
            </>}
            {
                mode === Mode.学习 &&
                <Study defaultArr={(tokens as any)[unit]} />
            }
            {
                mode === Mode.识字 &&
                <Read unit={unit} defaultArr={(words as any)[`第${unit}课`]} />
            }

        </div>


    </main>
    </>
}